import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    visible: true
    width: 400
    height: width

    Rectangle {
        id: root
        width: 400
        height: width
        color: '#e7e8e5'

        property bool bHover: false
        signal moduletext(string module)

        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            propagateComposedEvents: true

            onExited: {
                bottomRect.visible = false;
                image.source = "images/visitor_gray.png"
                root.bHover = false
                photo.hideUnit();
            }
        }

        Rectangle {
            id: bottomRect
            width: 180
            height: width
            radius: width/2
            anchors.centerIn: parent
            color: "#66ffffff"
            visible: false
        }

        Rectangle {
            id: upRect
            width: 160
            height: width
            radius: width/2
            gradient: Gradient {
                      GradientStop { position: 0.0; color: "white" }
                      GradientStop { position: 0.5; color: "white" }
                      GradientStop { position: 0.51; color: root.bHover?"#22a3fd":"#85898c"}
                      GradientStop { position: 1.0; color: root.bHover?"#22a3fd":"#85898c"}
                  }
            anchors.centerIn: parent

            Image {
                id: image
                source: "images/visitor_gray.png"
                anchors.top: parent.top
                anchors.topMargin: 15
                anchors.horizontalCenter: parent.horizontalCenter
                smooth: true
            }

            Text {
                id: name
                width: parent.width
                height: width/2
                text: qsTr("访客\r\n管理")
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                color: 'white'
                font.pixelSize: 24
                anchors.bottom: parent.bottom
            }

            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                preventStealing: true
                onEntered: {
                    bottomRect.visible = true;
                    image.source = "images/visitor_blue.png"
                    root.bHover = true
                    photo.showUnit();
                    photo.startParallelAnimation();
                }
            }
        }

        MyPhoto {
            id: photo
            width: parent.width
            height: parent.width
            anchors.centerIn: parent
            namelist: ["访客\r\n登记","访客\r\n预约","访客\r\n统计","历史\r\n记录"]
            onUnitClicked: function(text){
                root.moduletext(text);
                console.log(text);
            }
        }
    }
}
